import React from 'react'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import { Button } from 'antd'
import { FormattedMessage } from 'react-intl'

function ContentStudy (props) {
  const { ...tagProps } = props
  const { dataSource } = tagProps
  delete tagProps.dataSource
  delete tagProps.isMobile
  return (
    <div {...tagProps} {...dataSource.wrapper}>
      <div {...dataSource.page}>
        <div key='title' {...dataSource.titleWrapper}>
          {dataSource.titleWrapper.children.map((item, i) =>
            React.createElement(
              item.name.indexOf('title') === 0 ? 'h1' : 'div',
              { key: i.toString(), ...item },
              typeof item.children === 'string' &&
              item.children.match(/\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/)
                ? React.createElement('img', { src: item.children, alt: 'img' })
                : item.children
            )
          )}
        </div>
        <OverPack {...dataSource.OverPack}>
          <div className='content4-study'>
            <div className='online-center-title'>
              <FormattedMessage id='在线学习平台' />
            </div>
            <div className='d-inline-block light-underline' />
            <div>
              <p className='online-center-description'><FormattedMessage id='免费在线学习，提升编程能力' /></p>
            </div>
            <div className='join-button'>
              <a href='/learn/home/index.html#/app-center'>
                <Button type='primary'><FormattedMessage id='加入' /></Button>
              </a>
              <a href='/learn/home/index.html#/app-center'>
                <Button ghost><FormattedMessage id='登录' /></Button>
              </a>
            </div>
          </div>
        </OverPack>
      </div>
    </div>
  )
}

export default ContentStudy
